<template>
  <view class="content" v-if="!loading">
    <view class="info">
      <view class="section">
        <view class="info-title">备注</view>
        <view class="info-content" style="white-space: wrap">{{ remark }}</view>
      </view>
      <view class="section">
        <view class="info-left">
          <view class="info-title">大运</view>
          <view class="info-content">{{ dayunList[dayun] }}</view>
        </view>
        <view class="info-right">
          <view class="info-title">山向</view>
          <view class="info-content">{{ shanxiang }}</view>
        </view>
      </view>
      <view class="section">
        <view class="info-title">更换时间</view>
        <view class="info-content">
          <view class="info-content-date">
            <lunar-picker ref="lunarPicker" :date.sync="date" :showCalendarType="true" @confirm="datetimeChange($event)"></lunar-picker>
            <view>{{ panInfo.yearNongLi }}</view>            
          </view>
          <view class="changeDateBtn" @click="changeDate">修改时间</view>
        </view>
      </view>
    </view>
    <view class="content-box" ref="result">
      <!-- 卦象 -->
      <view class="table">
        <view class="td" :class="[current == rIndex ? 'selected-gong' : '']" v-for="(cell, rIndex) in panBody" :key="rIndex" @click="addInfo(cell, rIndex)">
          <template>
            <view class="flex-wrp-cell">
              <view class="flex-row">
                <view class="flex-item-cell">
                  <view class="shan-star">{{ cell.shan }}</view>
                </view>
                <view class="flex-item-cell">
                  <view></view>
                </view>
                <view class="flex-item-cell">
                  <view class="xiang-star">{{ cell.xiang }}</view>
                </view>
              </view>
              <view class="flex-row">
                <view class="flex-item-cell">
                  <view></view>
                </view>
                <view class="flex-item-cell">
                  <view class="yun-star">{{ cell.daYun }}</view>
                </view>
                <view class="flex-item-cell">
                  <view></view>
                </view>
              </view>
              <view class="flex-row">
                <view class="sizhu-cell">
                  <view>年</view>
                  <view>{{ cell.yearFlyingStar }}</view>
                </view>
                <view class="sizhu-cell">
                  <view>月</view>
                  <view>{{ cell.monthFlyingStar }}</view>
                </view>
                <view class="sizhu-cell">
                  <view>日</view>
                  <view>{{ cell.dayFlyingStar }}</view>
                </view>
                <view class="sizhu-cell">
                  <view>时</view>
                  <view>{{ cell.hourFlyingStar }}</view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
      <!-- 隐干 -->
      <view class="tmdh-top yingan-top">
        <view class="shan">{{directionBody[4]}}</view>
      </view>
      <view class="tmdh-bottom yingan-bottom shan">
        <view class="shan">{{directionBody[0]}}</view>
      </view>
      <view class="tmdh-left yingan-left shan">
        <view class="column-text">{{directionBody[3]}}</view>
        <view class="column-text">{{directionBody[2]}}</view>
        <view class="column-text">{{directionBody[1]}}</view>
      </view>
      <view class="tmdh-right yingan-right shan">
        <view class="column-text">{{directionBody[5]}}</view>
        <view class="column-text">{{directionBody[6]}}</view>
        <view class="column-text">{{directionBody[7]}}</view>
      </view>
    </view>
    <view class="tips">
      <view>提醒：点击宫位，可查看解读</view>
    </view>
    <view class="fx-box">
      <view class="fx-box-item">
        <view class="fx-title">年飞星</view>
        <view class="fx-table">
          <view class="fx-td" v-for="(cell, rIndex) in panBody" :key="rIndex">
            {{ numbeIndex[cell.yearFlyingStar] }}
          </view>
        </view>
      </view>
      <view class="fx-box-item">
        <view class="fx-title">月飞星</view>
        <view class="fx-table">
          <view class="fx-td" v-for="(cell, rIndex) in panBody" :key="rIndex">
            {{ numbeIndex[cell.monthFlyingStar] }}
          </view>
        </view>
      </view>
      <view class="fx-box-item">
        <view class="fx-title">日飞星</view>
        <view class="fx-table">
          <view class="fx-td" v-for="(cell, rIndex) in panBody" :key="rIndex">
            {{ numbeIndex[cell.dayFlyingStar] }}
          </view>
        </view>
      </view>
      <view class="fx-box-item">
        <view class="fx-title">时飞星</view>
        <view class="fx-table">
          <view class="fx-td" v-for="(cell, rIndex) in panBody" :key="rIndex">
            {{ numbeIndex[cell.hourFlyingStar] }}
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box">
      <view class="back-btn" @click="back">重新排盘</view>
    </view>
    <activity-box :positionId="1302"></activity-box>
    <uni-popup ref="popup" background-color="#fff" @change="change">
      <view class="popup-content">
        <view class="chengsheng-title">盘面解读</view>
        <view class="popup-item">
          <view class="popup-title">一、双星组合解读</view>
          <view class="popup-text">
            <span class="shan-star">{{ popInfo.shan }}</span>
            +
            <span class="xiang-star">{{ popInfo.xiang }}</span>
            ：
            <span v-html="popInfo.shanAndXiangExplain"></span>
          </view>
        </view>
        <view class="popup-item">
          <view class="popup-title yun-star">二、运星解读</view>
          <view class="popup-text" v-html="popInfo.daYunExplain"></view>
        </view>
        <view class="popup-item">
          <view class="popup-title shan-star">三、山星解读</view>
          <view class="popup-text" v-html="popInfo.shanExplain"></view>
        </view>
        <view class="popup-item">
          <view class="popup-title xiang-star">四、向星解读</view>
          <view class="popup-text" v-html="popInfo.xiangExplain"></view>
        </view>
        <view class="popup-item">
          <view class="popup-title xiang-star">五、流年飞星解读</view>
          <view class="popup-text" v-html="popInfo.yearFlyingStarExplain"></view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getXkfxResultApi } from '@/http/api/xuankongfeixing.js';
import { parseTime } from '@/utils/index.js';
export default {
  data() {
    return {
      loading: true,
      panInfo: {},
      panBody: {},
      current: undefined,
      popInfo: {},
      dayunList: ['一运', '二运', '三运', '四运', '五运', '六运', '七运', '八运', '九运'],
      type: 0,
      dayun: '',
      shanxiang: '',
      remark: '',
      date: [],
      numbeIndex: ['', '一白', '二黑', '三碧', '四绿', '五黄', '六白', '七赤', '八白', '九紫']
    };
  },
  mounted() {
    uni.showLoading({
      mask: true,
      title: '加载中'
    });
    let query = this.$route.query;
    let { remark, dayun, shanxiang, type, year, month, day, hour, minute } = query;
    this.type = type;
    this.remark = remark;
    this.dayun = dayun;
    this.shanxiang = shanxiang;
    this.date = [year, month, day, hour, minute];
    this.getResult()
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    changeDate() {
      this.$refs.lunarPicker.show();
    },
    datetimeChange(e) {
      this.date = [e.cYear, e.cMonth, e.cDay, e.hour, e.minute];
      this.getResult();
    },
    getResult() {
      uni.showLoading({
        mask: true,
        title: '加载中'
      });
      getXkfxResultApi({
        daYun: parseInt(this.dayun) + 1,
        paipanTime: `${this.date[0]}-${this.date[1]}-${this.date[2]} ${this.date[3]}:${this.date[4]}`,
        remark: this.remark,
        shanXiang: this.shanxiang,
        type: this.type,
        userName: ''
      }).then((res) => {
        if (res.code == 200) {
          // 宫格按照指定顺序排序
          let arr = [4, 9, 2, 3, 5, 7, 8, 1, 6];
          this.panInfo = res.data.feiXingVo;
          this.directionBody = res.data.direction;
          this.panBody = [];
          for (let item of arr) {
            this.panBody.push(res.data.xuanKongFeiXingGong.find((e) => e.index == item));
          }
          this.loading = false;
          uni.hideLoading();
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    // 宫位信息
    addInfo(data, index) {
      if (this.current == index) {
        this.current = undefined;
        return;
      }
      this.popInfo = data;
      this.current = index;
      this.$refs.popup.open('bottom');
    },
    change(e) {
      if (e.show == false) this.current = undefined;
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  color: #32312e;
  font-size: 28rpx;
  overflow-x: hidden;
}

.info {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #c5a680;
  padding: 0 40rpx 20rpx;
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bolder;
}

.info-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.info-left {
  width: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.sizhi-title {
  display: flex;
  align-items: flex-end;
  white-space: nowrap;
  height: fit-content;
}

.mod-text {
  display: flex;
  flex-direction: row;
}

.sizhi-text {
  text-align: end;
  line-height: 24rpx;
  padding-right: 12rpx;
}

.more-time {
  font-size: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.more-time-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.section {
  display: flex;
  flex-direction: row;
  padding-bottom: 10rpx;
  align-items: flex-start;
}

.info-title {
  white-space: nowrap;
  background-color: #4b240d;
  padding: 0 12rpx;
  
  letter-spacing: 4rpx;
  height: fit-content;
}

.info-content {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  padding: 0 12rpx;
  box-sizing: border-box;
  .date-picker {
    ::v-deep .uni-input-input {
      font-size: 24rpx;
    }
  }
  .info-content-date {
    width: 400rpx;
  }
  .changeDateBtn {
    text-decoration: underline;
  }
}

.content-box {
  padding: 100rpx;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 2rpx solid #ccc;
  
}

/* 宫格 */
.fx-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .fx-box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40rpx;
    .fx-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .fx-table {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      width: 480rpx;
    }

    .fx-td {
      box-sizing: border-box;
      width: 160rpx;
      height: 160rpx;
      border: solid 2rpx #7aa4b0;
      background: #d8fdd7;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }
  }
}
.table {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.td {
  box-sizing: border-box;
  width: 33%;
  border-radius: 30rpx;
  border: solid 2rpx #4b240d;
  box-shadow: 0 0 4px #666;
  background: #fff;
}

.lightGrey {
  border: none;
}

.flex-wrp-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  box-sizing: border-box;
}

.flex-item-cell {
  // height: 33%;
  text-align: center;
  line-height: 56rpx;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sizhu-cell {
  // text-align: center;
  // line-height: 34rpx;
  color: #8c8c8c;
  white-space: nowrap;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.tips {
  width: 100%;
  text-align: center;
  padding: 20rpx 0;
}

 .tmdh-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: absolute;
    top: 10rpx;
    left: 10rpx;
    padding: 0 80rpx;
    box-sizing: border-box;
  }
  
  .yingan-top {
    top: 50rpx
  }
  
  .tmdh-left {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0rpx;
    left: 10rpx;
    padding: 80rpx 0;
    box-sizing: border-box;
  }
  
  .yingan-left {
    left: 40rpx;
  }
  
  .tmdh-right {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    top: 0rpx;
    right: 10rpx;
    padding: 80rpx 0;
    box-sizing: border-box;
  }
  
  .yingan-right {
    right: 40rpx;
  }
  
  .tmdh-bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: absolute;
    bottom: 10rpx;
    left: 10rpx;
    padding: 0 80rpx;
    box-sizing: border-box;
  }
  
  .yingan-bottom {
    bottom: 50rpx
  }
  
.btn-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 30rpx;
  box-sizing: border-box;
}
.back-btn {
  width: 521rpx;
  height: 78rpx;
  
  font-size: 32rpx;
  color: #fff;
  background-color: #c6a680;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}
.shan-star {
  font-weight: bold;
  color: green;
}
.xiang-star {
  font-weight: bold;
  color: red;
}
.yun-star {
  font-weight: bold;
  color: #5fc0bc;
}
.selected-gong {
  background: #f2d4d2;
}
.popup-content {
  display: flex;
  flex-direction: column;
  height: 40vh;
  padding: 20rpx 30rpx;
  font-size: 30rpx;
  overflow-y: scroll;
}
.chengsheng-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}
.popup-item {
  display: flex;
  flex-direction: column;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #ededed;
}
.popup-title {
  font-weight: bold;
  white-space: nowrap;
  margin-bottom: 30rpx;
}
.popup-text {
  white-space: pre-wrap;
}
.shan {
  color: #ff6c00;
}
</style>
